<template>
  <div style="margin-left: 10px; margin-top: 15px">
    <el-row>
      <el-row>
        <el-button type="primary" plain size="small" icon="el-icon-plus" @click="insertRole">新增角色</el-button>
        <el-button type="success" plain size="small" icon="el-icon-download">导入角色</el-button>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-table v-loading="loading" :data="tableData" border style="width: 100%">
          <el-table-column type="selection" width="30" prop="roleId" />
          <el-table-column prop="roleName" label="角色名称" width="230" align="center" />
          <el-table-column prop="roleKey" label="权限标识" width="230" align="center" />
          <el-table-column prop="roleSort" label="显示顺序" width="80" align="center" />
          <el-table-column prop="status" label="状态" width="130" align="center">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                active-color="#ff4949"
                inactive-color="#13ce66"
                @change="changeSwitch(scope.row.roleId, scope.row.status)"
              />
            </template>
          </el-table-column>
          <el-table-column prop="createTime" clearable label="创建时间" width="230" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="warning" @click="handleEdit(scope.row.roleId)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.row.roleId)">删除</el-button>
              <el-button size="mini" type="success" @click="handleAssign(scope.row.roleId)">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 表格下方放置一个分页组件，并使其水平居中 -->
      <el-row type="flex" justify="center" style="margin-top: 20px">
        <el-col :span="12">
          <!-- 根据需要调整 span 值 -->
          <!-- 表格下方放置一个分页组件 -->
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="text-align: center; margin-top: 20px"
            prev-text="上一页"
            next-text="下一页"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-col>
      </el-row>
      <!-- 这里使用.sync表示会接收子组件的事件 update:showDialog 这里相当于自己绑定了一个update:showDialog事件，而且子组件传过来的值会直接赋值给这个showDialog变量-->
      <!-- 如果没有使用这个.sync这个修饰符的话，你还需要自己去自定义事件 @事件名='xxx'的方式去修改showDialog的值 -->
      <RoleDialog :title="title" :show-dialog.sync="showDialog" :current-role="currentRole" @refreshList="fetchData" />

      <!-- 给角色分配菜单的弹窗 -->
      <AssignDialog :title="title" :assign-show-dialog.sync="assignShowDialog" :role-id="roleId" />
    </el-row>
  </div>
</template>

<script>
  import { updateRoleStatus, deleteByRoleId, findByRoleId } from '@/api/role'
  import RoleDialog from './RoleDialog.vue'
  import AssignDialog from './AssignDialog.vue'
  export default {
    components: { RoleDialog, AssignDialog },
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      tableData: {
        type: Array,
        default: () => [] // 默认值
      },
      total: {
        type: Number,
        default: () => 0
      },
      currentPage: {
        type: Number,
        default: 1
      },
      pageSize: {
        type: Number,
        default: 5
      }
    },
    data() {
      return {
        showDialog: false,
        title: '',
        currentRole: null,
        assignShowDialog: false,
        roleId: ''
      }
    },
    methods: {
      /**
       * 根据角色id,修改角色状态
       * @param roleId
       * @param status
       */
      async changeSwitch(roleId, status) {
        // console.log(roleId, status)
        await updateRoleStatus(roleId, status)
        this.$message.success('操作成功')
        this.$emit('pageChange', this.currentPage, this.pageSize)
      },
      /**
       * 获取角色信息
       * @param roleId
       */
      async findByRoleId(roleId) {
        this.currentRole = await findByRoleId(roleId)
      },
      /**
       * 根据角色roleId获取角色详细信息
       * @param roleId
       */
      handleEdit(roleId) {
        this.findByRoleId(roleId)
        this.title = '编辑角色'
        this.showDialog = true
      },
      /**
       * 新增角色弹窗
       */
      insertRole() {
        this.title = '新增角色'
        this.showDialog = true
      },
      /**
       * 根据角色roleId删除角色
       * @param roleId
       */
      handleDelete(roleId) {
        this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await deleteByRoleId(roleId)
            this.$emit('pageChange', this.currentPage, this.pageSize)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      },
      /**
       * 分配权限弹窗
       * @param roleId
       */
      handleAssign(roleId) {
        this.roleId = roleId
        this.title = '分配权限'
        this.assignShowDialog = true
      },
      /**
       *点击页码数发生变化时候触发
       * @param page
       */
      handleCurrentChange(currentPage) {
        // console.log('@current-change=handleCurrentChange执行,第几页发生变化', currentPage)
        this.$emit('pageChange', currentPage, this.pageSize)
      },
      /**
       * 选择每页显示多少条时候触发
       * @param pageSize
       */
      handleSizeChange(pageSize) {
        // console.log('@size-change=handleSizeChange执行,每页显示的条数发生变化', pageSize)
        this.$emit('pageChange', this.currentPage, pageSize)
      },
      /**
       * 提供给子组件刷新列表使用
       */
      fetchData() {
        this.$emit('pageChange', this.currentPage, this.pageSize)
      }
    }
  }
</script>

<style></style>
